<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="#{bundle.ViewAnnounceTitle}"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <script type="text/javascript" language="JavaScript">       
        function imageShift(obj) {
            //alert(obj.src);
            var image = document.getElementById('mainImage');
            image.src = obj.src;
            document.body.appendChild(img);
            
        }
        
        function abcd() {
            alert('test');
        }
            </script>
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
            <h:form>


                <div>

                    <img id="mainImage" alt="" src="../#{announceController.selected.idProperty.imageCollection[0].path}" height="280" width="400" />
                    <h:outputText value=""/>
                    <br />
                    <h:graphicImage id="image0" rendered="#{announceController.selected.idProperty.imageCollection[0] != null}" url="../#{announceController.selected.idProperty.imageCollection[0].path}" alt="thumb" height="70" width="100px" onclick="imageShift(this);" />
                    <h:graphicImage id="image1" rendered="#{announceController.selected.idProperty.imageCollection[1] != null}" url="../#{announceController.selected.idProperty.imageCollection[1].path}" alt="thumb" height="70" width="100px" onclick="imageShift(this);" />
                    <h:graphicImage id="image2" rendered="#{announceController.selected.idProperty.imageCollection[2] != null}" url="../#{announceController.selected.idProperty.imageCollection[2].path}" alt="thumb" height="70" width="100px" onclick="imageShift(this);" />
                    <h:graphicImage id="image3" rendered="#{announceController.selected.idProperty.imageCollection[3] != null}" url="../#{announceController.selected.idProperty.imageCollection[3].path}" alt="thumb" height="70" width="100px" onclick="imageShift(this);" />
                    <h:graphicImage id="image4" rendered="#{announceController.selected.idProperty.imageCollection[4] != null}" url="../#{announceController.selected.idProperty.imageCollection[4].path}" alt="thumb" height="70" width="100px" onclick="imageShift(this);" />
                    <h:graphicImage id="image5" rendered="#{announceController.selected.idProperty.imageCollection[5] != null}" url="../#{announceController.selected.idProperty.imageCollection[5].path}" alt="thumb" height="70" width="100px" onclick="imageShift(this);" />
                </div>
                <br />
                <div style="background-color: transparent; height: auto; width: 400px; float: inherit; margin: 3px 3px 3px 3px;">
                    <div style="background-color: #DDDDDD; height: auto; width: 400px; float: left;" onmouseover="this.style.backgroundColor='#EEEEEE'" onmouseout="this.style.backgroundColor='#DDDDDD'" >
                        <div style="background-color: transparent; height: inherit; width: 400px; float: left; margin: 3px 3px 3px 3px;">
                            <br />
                            <div style=" background-color:transparent; float:left; height:auto; width:400; margin:0px 5px 1px 5px;">
                                <h:form>
                                    <h:outputLabel value="Offer Value:" for="offerValue" />
                                    <h:inputText id="offerValue" value="#{announceController.offerValue}" required="true" requiredMessage="Offer Value field is required for placing a offer!" />
                                    &nbsp;&nbsp;
                                    <h:selectOneMenu id="currency" value="#{announceController.currency}" title="Currency" required="true" requiredMessage="Currency is required">
                                        <f:selectItems value="#{announceController.allCurrencies}"/>
                                    </h:selectOneMenu>
                                    &nbsp;&nbsp;
                                    <h:commandButton action="#{announceController.makeOffer}" value="Make offer" rendered="#{(sessionScope.agent==true) or (sessionScope.user==true)}" />
                                    <br />
                                </h:form>

                                <br />
                                <div style="background-color: transparent; height: auto; width: 150px; float: left; margin: 3px 3px 3px 3px;">
                                    address:
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.address}"/>
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.address2}"/>
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.postcode}"/>
                                </div>
                                <div style="background-color:transparent; float: left; height: 50px; width: auto; margin:3px 8px 1px 8px;">
                                    type:
                                    <br />
                                    <h:outputText value="#{announceController.selected.type}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin:3px 8px 1px 8px;">
                                    status:
                                    <br />
                                    <h:outputText value="#{announceController.selected.status}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin: 3px 8px 1px 8px;">
                                    price:
                                    <br />
                                    <h:outputText value="#{announceController.selected.price}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin:3px 8px 1px 8px;">
                                    bedroom:
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.numberBedroom}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin:3px 8px 1px 8px;">
                                    bathroom:
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.numberBathroom}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin:3px 8px 1px 8px;">
                                    garden:
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.garden}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin:3px 8px 1px 8px;">
                                    furniture:
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.furniture}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin:3px 5px 1px 5px;">
                                    size m²:
                                    <br />
                                    <h:outputText value="#{announceController.selected.idProperty.sizeSquareMetre}"/>
                                </div>
                                <div style="background-color: transparent; float: left; height: 50px; width: auto; margin:3px 5px 1px 5px;">
                                    &nbsp;
                                    <br />
                                    &nbsp;
                                </div>
                                <br />
                                <div style=" background-color:transparent; float:left; height:auto; width:400; margin:0px 5px 1px 5px;">
                                    Announce Description:
                                    <h:outputText value="#{announceController.selected.description}" /><br />&nbsp; <br />

                                    Property description:
                                    <h:outputText value="#{announceController.selected.idProperty.description}" /><br /> <br />
                                    
                                    <h:outputText value="Owner username: " style="color: #e33b06" />
                                    <h:outputText value="#{announceController.selected.idProperty.ownerUsername.username}" style="color: blue"/>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <h:outputText value="Client username: " style="color: #e33b06" />
                                    <h:outputText value="#{sessionScope.username}"  style="color: blue"/>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <h:outputText value="role owner: " style="color: #e33b06" />
                                    <h:outputText value="#{sessionScope.owner}" style="color: blue"/><br />
                                    <h:outputText value="role agent: " style="color: #e33b06" />
                                    <h:outputText value="#{sessionScope.agent}" style="color: blue"/>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <h:outputText value="role client: " style="color: #e33b06" />
                                    <h:outputText value="#{sessionScope.user}" style="color: blue"/><br />
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>


                    <br />
                    <div style=" background-color:transparent; float:none; height:auto; width:400; margin:0px 5px 1px 5px;">
                        <br />
                        <h:commandLink action="#{announceController.destroyAndView}" value="#{bundle.ViewAnnounceDestroyLink}" rendered="#{(sessionScope.agent==true) or (sessionScope.owner==true and announceController.selected.idProperty.ownerUsername.username == sessionScope.username)}" />
                        <br />
                        <h:commandLink action="Edit" value="#{bundle.ViewAnnounceEditLink}" rendered="#{(sessionScope.agent==true) or (sessionScope.owner==true and announceController.selected.idProperty.ownerUsername.username == sessionScope.username)}" />
                        <br />
                        <h:commandLink action="#{announceController.prepareCreate}" value="#{bundle.ViewAnnounceCreateLink}" rendered="#{(sessionScope.agent==true) or (sessionScope.owner==true)}"/>
                        <br />&nbsp;<br />
                        <h:commandLink action="#{announceController.prepareList}" value="#{bundle.ViewAnnounceShowAllLink}"/>
                        <br />
                    </div>
                </div>
            </h:form>
            <br />


        </ui:define>
    </ui:composition>

</html>
